import React from "react"
import {StyleSheet} from "react-native"
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs"
import FontAwesomeIcons from "@react-native-vector-icons/fontawesome6"
import {SvgXml} from "react-native-svg"
import {
  friend,
  group,
  selectedGroup,
  message,
  selectedMessage,
  my,
  selectedMy,
  selectedFriend,
} from "./res/fonts/iconSvg"

// 引入各个Tab页面
import Friend from "./pages/friend/Friend"
import Group from "./pages/group/Group"
import Message from "./pages/message/Message"
import My from "./pages/my/My"

// 创建底部Tab导航器
const Tab = createBottomTabNavigator()

// 颜色常量
const ACTIVE_COLOR = "#FF5E00"
const INACTIVE_COLOR = "#999999"

// TabBar组件
const Tabbar = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarStyle: styles.tabBarStyle,
        tabBarLabelStyle: styles.tabBarLabelStyle,
      }}>
      <Tab.Screen
        name="交友"
        component={Friend}
        options={{
          tabBarIcon: ({focused}) => (
            <SvgXml
              xml={focused ? selectedFriend : friend}
              width={20}
              height={20}
              fill={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
            />
          ),
          tabBarActiveTintColor: ACTIVE_COLOR,
          tabBarInactiveTintColor: INACTIVE_COLOR,
        }}
      />
      <Tab.Screen
        name="圈子"
        component={Group}
        options={{
          tabBarIcon: ({focused}) => (
            <FontAwesomeIcons
              name="compass"
              size={20}
              color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
            />
          ),
          tabBarActiveTintColor: ACTIVE_COLOR,
          tabBarInactiveTintColor: INACTIVE_COLOR,
        }}
      />
      <Tab.Screen
        name="消息"
        component={Message}
        options={{
          tabBarIcon: ({focused}) => (
            <FontAwesomeIcons
              name="comment"
              size={20}
              color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
            />
          ),
          tabBarActiveTintColor: ACTIVE_COLOR,
          tabBarInactiveTintColor: INACTIVE_COLOR,
        }}
      />
      <Tab.Screen
        name="我的"
        component={My}
        options={{
          tabBarIcon: ({focused}) => (
            <FontAwesomeIcons
              name="user"
              size={20}
              color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
            />
          ),
          tabBarActiveTintColor: ACTIVE_COLOR,
          tabBarInactiveTintColor: INACTIVE_COLOR,
        }}
      />
    </Tab.Navigator>
  )
}

const styles = StyleSheet.create({
  tabBarStyle: {
    height: 60,
    paddingBottom: 5,
    paddingTop: 5,
    backgroundColor: "#FFFFFF",
    borderTopWidth: 1,
    borderTopColor: "#EEEEEE",
  },

  tabBarLabelStyle: {
    fontSize: 12,
    fontWeight: "500",
  },
})

export default Tabbar
